<template>
  <div id="invitation">
    <app-header></app-header>
    <van-notice-bar v-if="noticeIfo" :left-icon="leftIcon">
      {{noticeIfo}}
    </van-notice-bar>
    <div class="invitation-top">
      <div class="top-box">
        <div class="invitation-top-title">
          <p>好友邀请你一起瓜分5亿ONEBET</p>
          <p> 还可参与每日ETH分红</p>
        </div>
        <ul>
          <li>
            <label for="" v-if="platformProfitsdata">
              {{platformProfitsdata.yesterdayDividend}}ETH</label>
            <span>昨日分红</span>
          </li>
          <li>
            <label for="" v-if="platformProfitsdata">{{platformProfitsdata.totalDividend}}ETH</label>
            <span>累计分红</span>
          </li>
          <li>
            <label for="" v-if="platformProfitsdata">{{platformProfitsdata.totalAward}}ETH</label>
            <span>累计开奖金额</span>
          </li>
        </ul>
      </div>

    </div>
    <div class="baiwan-title">玩法介绍</div>
    <div class="video">
      <video width="" height="" controls="controls" id="video">
        <source src="http://slotmachines.oss-cn-beijing.aliyuncs.com/vedio/vedio.mp4" type="video/mp4">
      </video>
    </div>
    <div class="invitation-form-box">
      <div class="invitation-form">
        <div>
          <label><i class="iconfont">&#xe769;</i></label>
          <input type="text" placeholder="邮箱" v-model="info.receiver" name="receiver" ref="receiver"
                 @blur="handleBlur"/>
          <span class="hiden" ref="receiver_empty">邮箱不能为空</span>
          <span class="hiden" ref="receiver_span">请输入正确的邮箱</span>
        </div>
        <div>
          <label><i class="iconfont">&#xe7af;</i></label>
          <input type="text" placeholder="验证码" v-model="info.code" name="code" ref="code" class="code-input"
                 @blur="handleBlur"/>
          <span :class="handeleCode?'verification-active':'verification-code'" @click="getCode">{{phoneCodemsg}}</span>
          <span class="hiden" ref="code_empty">验证码不能为空</span>
          <span class="hiden" ref="code_span">验证码不能为空</span>
        </div>
        <div>
          <label><i class="iconfont">&#xe614;</i></label>
          <input type="password" placeholder="密码" v-model="info.password" name="password" ref="password"
                 @blur="handleBlur"/>
          <span class="hiden" ref="password_empty">密码不能为空</span>
          <span class="hiden" ref="password_span">密码必须由6-16位字母和数字组成</span>
        </div>

        <div class="submit" @click="handleSubmit">注册</div>
        <span class="agreement-dec">注册即代表你同意《1dollar.bet用户协议》</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {Toast} from 'vant'
  import Header from '@/components/component/header.vue'
  import Api from '@/axios'

  let rejson = {
    password: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
    receiver: /^([a-z0-9]*[-_.]?[a-z0-9]+)*@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    code: /\S/
  }
  export default {
    name: 'invitation',
    data() {
      return {
        platformProfitsdata: null,
        noticeIfo: '',
        leftIcon: require('../../assets/img/notice.png'),
        info: {
          receiver: '',
          password: '',
          code: ''
        },
        codeTimer: null,
        handeleCode: false,
        phoneCodemsg: '发送验证码',
        countdown: 60
      }
    },
    components: {
      ...mapGetters({
        language: 'language'
      }),
      'app-header': Header
    },
    watch: {
      language() {
        this.getNoticebar()
      }
    },
    methods: {
      getplatformProfits() {
        Api.platformProfits().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.platformProfitsdata = result.data
          } else {
            this.$message.error(result.message)
          }
        })
      },
      getNoticebar() {
        Api.noticeBar().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.noticeIfo = result.data.message
          } else {
            this.$message.error(result.message)
          }
        })
      },
      getCode() {
        let self = this
        if (self.countdown !== 60) return false
        if (!self.info.receiver) {
          this.$refs.receiver_span.className = 'hiden'
          this.$refs.receiver_empty.className = 'errShow'
        } else if (!rejson.receiver.test(this.info.receiver)) {
          this.$refs.receiver_empty.className = 'hiden'
          this.$refs.receiver_span.className = 'errShow'
        } else {
          let params = {
            receiver: this.info.receiver
          }
          Api.sendCode(params).then(res => {
            let result = res.data
            if (result.code === 0) {
              self.handleCountdown()
              Toast.success('发送成功')
            } else {
              Toast.fail(result.message)
            }
          })
        }
      },
      handleCountdown() {
        let self = this
        if (self.countdown !== 60) return false
        self.handeleCode = !self.handeleCode
        if (!self.handeleCode) return false
        self.phoneCodemsg = self.countdown + 's后重新获取'
        clearInterval(self.codeTimer)
        self.codeTimer = setInterval(() => {
          self.countdown = self.countdown - 1
          if (self.countdown > 0) {
            self.phoneCodemsg = self.countdown + 's后重新获取'
          } else {
            self.countdown = 60
            self.phoneCodemsg = '发送验证码'
            self.handeleCode = false
            clearInterval(self.codeTimer)
          }
        }, 1000)
      },
      handleBlur(event) {
        let currentEl = event.target.name
        let currentVal = event.target.value
        if (currentVal) {
          if (rejson[currentEl]) {
            this.$refs[currentEl + '_empty'].className = 'hiden'
            if (rejson[currentEl].test(event.target.value)) {
              this.$refs[currentEl + '_span'].className = 'hiden'
            } else {
              this.$refs[currentEl + '_span'].className = 'errShow'
            }
          }
        } else {
          this.$refs[currentEl + '_empty'].className = 'errShow'
        }
      },
      handleSubmit() {
        let bOk = true
        for (let name in rejson) {
          if (this.info[name] !== '') {
            this.$refs[name + '_empty'].className = 'hiden'
            this.$refs[name + '_span'].className = 'hiden'
            if (!rejson[name].test(this.info[name])) {
              this.$refs[name + '_span'].className = 'errShow'
              bOk = false
            } else {
              this.$refs[name + '_span'].className = 'hiden'
            }
          } else {
            bOk = false
            this.$refs[name + '_empty'].className = 'errShow'
          }
        }
        if (!bOk) {
          return false
        }
        Api.register(this.info).then(res => {
          let result = res.data
          if (result.code === 0) {
            Toast.success('注册成功')
            localStorage.setItem('token', result.data)
            this.$router.push({
              path: '/login'
            })
          } else {
            Toast.fail(result.message)
          }
        })
      }
    },
    mounted() {
      // 如果有code，在注册的时候带入注册接口
      if (this.$route.query.inviteCode) {
        this.info.inviteCode = this.$route.query.inviteCode
      }
      this.getplatformProfits()
      this.getNoticebar()
    }
  }
</script>

<style lang="less" scoped>
  #invitation {
    width: 100%;
    height: auto;
    min-height: 100%;
    display: block;
    /*padding: 40px 0;*/
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    color: #FFFFFF;
    .invitation-top {
      width: 100%;
      height: 294px;
      margin: 40px auto 0;
      padding: 0 24px;
      box-sizing: border-box;
      display: block;
      overflow: hidden;
      .top-box {
        width: 100%;
        height: 294px;
        margin: 0 auto;
        padding: 40px 56px;
        box-sizing: border-box;
        background: #1E3054;
        display: block;
        overflow: hidden;
        .invitation-top-title {
          width: 100%;
          height: 90px;
          display: block;
          overflow: hidden;
          margin-bottom: 30px;
          > p {
            width: 100%;
            height: auto;
            line-height: 45px;
            display: block;
            overflow: hidden;
            font-family: PingFangSC-Medium;
            font-size: 32px;
            color: #F1D487;
            text-align: center;
          }
        }
        > ul {
          width: 100%;
          height: auto;
          display: block;
          overflow: hidden;
          margin: 0 auto;
          > li {
            width: 33.33%;
            height: auto;
            float: left;
            text-align: left;
            &:last-child {
              text-align: right;
            }
            &:first-child {
              text-align: left;
            }
            > label {
              width: 100%;
              height: 50px;
              line-height: 50px;
              font-family: PingFangSC-Regular;
              font-size: 36px;
              color: #FFFFFF;
              display: block;
              overflow: hidden;
              margin-bottom: 14px;
            }
            > span {
              width: 100%;
              height: 30px;
              line-height: 30px;
              font-family: PingFangSC-Regular;
              font-size: 22px;
              color: #9F9F9F;
              display: block;
              overflow: hidden;
            }
          }
        }
      }
    }
    .van-notice-bar {
      height: 54px;
      line-height: 54px;
      background: #D3B269;
      font-size: 22px;
      color: #FFFFFF;
      margin-bottom: 10px;
    }
    .video {
      width: 100%;
      min-height: 380px;
      padding: 0 24px;
      box-sizing: border-box;
      video {
        max-width: 100%;
      }
    }
    .invitation-form-box {
      width: 100%;
      height: auto;
      padding: 0 24px;
      box-sizing: border-box;
      display: block;
      overflow: hidden;
    }
    .agreement-dec {
      width: 100%;
      height: auto;
      line-height: 30px;
      display: block;
      overflow: hidden;
      font-family: PingFangSC-Regular;
      font-size: 22px;
      color: #F0D386;
      text-align: center;
      margin-bottom: 90px;
    }

  }
</style>
